<template>
    <div class="resultShow">
        <navbar></navbar>
        <van-list
                v-model="result.loading"
                :finished="result.finished"
                :immediate-check="false"
                finished-text="我也是有底线的"
                @load="onload"
        >
            <div class="coverParent">

                <itemCover v-for="(item, itemIndex) in result.list" :nowGenre_Item="item"
                           :key="itemIndex" class="cover"></itemCover>
            </div>

        </van-list>
    </div>
</template>

<script>
    import navbar from "@/components/common/navbar.vue";
    import itemCover from "@/components/common/itemCover";

    export default {
        name: "searchResult",
        data() {
            return {
                result: {
                    list: [],
                    page: 0,
                    loading: true,
                    finished: false,
                    pagesize: 10
                },
            }
        },

        mounted: function () {
            this.search()
        },
        methods: {
            async search() {
                if (this.$route.query.active_genre == '小说') {
                    const res = await this.$http.post("/novel/byName", {name: this.$route.query.wd})
                    const list = res.data.data;
                    list.forEach((i) => {
                        i.big_genre = this.$route.query.active_genre
                    })
                    this.result.list = list
                } else {
                    await this.loadMovie()
                }
            },
            async loadMovie() {
                const res = await this.$http.get("/esProduct/search/simple", {
                    params: {
                        keyword: this.$route.query.wd,
                        pageNum: this.result.page, pageSize: this.result.pagesize
                    }
                })
                const ls = res.data.data.list;
                ls.forEach((i) => {
                    i.big_genre = this.$route.query.active_genre
                })
                this.result.list.push(...ls)
                this.result.loading = false;
                if (res.data.data.list.length < this.result.pagesize) {
                    this.result.finished = true;
                }
            },
            onload() {
                setTimeout(() => {
                    this.result.page += 1;
                    this.loadMovie()
                }, 1000)
            },

        },


        watch: {
            '$route': function (to, from) {
                if (from.name == to.name) {
                    const x = {
                        list: [],
                        page: 0,
                        loading: true,
                        finished: false,
                        pagesize: 10
                    }
                    this.result = x
                    this.search()
                }

            }
        },
        components: {
            navbar, itemCover
        }
    }
</script>

<style lang="less">
    .resultShow {
        background-color: white;

        .coverParent {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .cover {
                width: 45%;
                margin: 1.39vw 0;
            }
        }
    }
</style>